<template>
<el-card>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>轨检数据智能算法</el-breadcrumb-item>
        <el-breadcrumb-item>轨检数据波形匹配</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 第二行 -->
    <el-row class="secondRow">
        <!-- 下拉菜单选择表 -->
        <el-col :span="7">
            <el-select v-model="tablename1" clearable placeholder="请选择" class="tableSelect">
                <el-option v-for="item in tablesList1" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
        </el-col>
        <!-- 下拉菜单选择传感器 -->
        <el-col :span="3">
            <el-select v-model="sensorname" clearable placeholder="请选择">
                <el-option v-for="item in sensorList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
        </el-col>
        <el-col :span="3" class="col-1"><span>请选择起始里程：</span></el-col>
        <el-col :span="5">
            <!-- 整数数字输入框输入开始公里 -->
            <el-input-number v-model="km" :min="1" :max="1300" label="开始公里"></el-input-number>
            <span class="kmsp">KM</span>
        </el-col>
        <el-col :span="4">
            <!-- 数字输入框输入开始米 -->
            <el-input-number v-model="meters" :min="0" :max="999.75" :precision="2" :step="0.25" label="开始米"></el-input-number>
        </el-col>
        <el-col :span="2">
            <!-- 确定按钮 -->
            <el-button icon="el-icon-search" @click.prevent="handleSearch1"></el-button>
        </el-col>
    </el-row>
    <!-- 第三行 -->
    <el-row class="thirdRow">
        <!-- 下拉菜单选择表 -->
        <el-col :span="7">
            <el-select v-model="tablename2" clearable placeholder="请选择" class="tableSelect">
                <el-option v-for="item in tablesList2" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
        </el-col>
        <!-- 下拉菜单选择传感器 -->
        <el-col :span="3">
            <el-select disabled v-model="sensorname" clearable placeholder="请选择">
                <el-option v-for="item in sensorList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
        </el-col>
        <el-col :span="3" class="col-1"><span>请选择起始里程：</span></el-col>
        <el-col :span="5">
            <!-- 整数数字输入框输入开始公里 -->
            <el-input-number disabled v-model="km" :min="1" :max="1300" label="开始公里"></el-input-number>
            <span class="kmsp">KM</span>
        </el-col>
        <el-col :span="4">
            <!-- 数字输入框输入开始米 -->
            <el-input-number disabled v-model="meters" :min="0" :max="999.75" :precision="2" :step="0.25" label="开始米"></el-input-number>
        </el-col>
        <el-col :span="2">
            <!-- 确定按钮 -->
            <el-button icon="el-icon-search" @click.prevent="handleSearch2"></el-button>
        </el-col>
    </el-row>
    <el-button type="warning" plain round class="wmBTN" @click.prevent="handleWM">进行波形匹配</el-button>
    <!-- line -->
    <div id="myChart" :style="{width: '1000px', height: '300px'}"></div>
</el-card>
</template>

<script>
var echarts = require("echarts")

export default {
    data() {
        return {
            tablesList1: [],
            tablename1: '',
            sensorname: '',
            sensorList: [],
            km: 1,
            meters: 0,
            tablesList2: [],
            tablename2: '',
            //sensorname2: '',
            //sensorList2: [],
            //km2: 1,
            //meters2: 0,
            trackdd1: [],
            trackdd2: []
        }
    },
    created() {
        this.getTables()
        this.getSensors()
    },
    mounted() {
        this.drawLine()
    },
    methods: {
        async handleWM() {
            // 计算匹配按钮
            let myChart = echarts.init(document.getElementById('myChart'))
            // showloading
            myChart.showLoading();
            const form = {
                tablename: this.tablename1,
                sensorname: this.sensorname,
                km: this.km,
                meters: this.meters,
            }

            const res = await this.$http.post('/getTrackDataLineFExcel?od=3', form);
            this.trackdd1 = res.data.data;
            const len = this.trackdd1.length;
            var xdata = new Array(len)
            for (var i = 0; i < len; i++) {
                xdata[i] = i + 1;
            }
            // loading
            myChart.hideLoading();

            myChart.setOption({
                title: {
                    text: '轨检数据波形展示',
                    subtext: '数据来自北京交大515实验室',
                    left: 'center'
                },
                legend: {
                    data: ['待匹配波形', '基准波形'],
                    left: 'right',
                    orient: 'vertical'
                },
                toolbox: {
                    left: 'left',
                    feature: {
                        saveAsImage: {}
                    }
                },
                tooltip: {
                    trigger: 'axis',
                },
                xAxis: {
                    data: xdata
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    name: '待匹配波形',
                    type: 'line',
                    data: this.trackdd1
                }, {
                    name: '基准波形',
                    type: 'line',
                    data: this.trackdd2
                }]
            })
        },
        async handleSearch1() {
            // 第一行的搜索按钮 newWave 待匹配数据
            let myChart = echarts.init(document.getElementById('myChart'))
            // showloading
            myChart.showLoading();
            const form = {
                tablename: this.tablename1,
                sensorname: this.sensorname,
                km: this.km,
                meters: this.meters,
            }

            const res = await this.$http.post('/getTrackDataLineFExcel?od=1', form);
            this.trackdd1 = res.data.data;
            const len = this.trackdd1.length;
            var xdata = new Array(len)
            for (var i = 0; i < len; i++) {
                xdata[i] = i + 1;
            }
            // loading
            myChart.hideLoading();

            myChart.setOption({
                title: {
                    text: '轨检数据波形展示',
                    subtext: '数据来自北京交大515实验室',
                    left: 'center'
                },
                legend: {
                    data: ['待匹配波形', '基准波形'],
                    left: 'right',
                    orient: 'vertical'
                },
                toolbox: {
                    left: 'left',
                    feature: {
                        saveAsImage: {}
                    }
                },
                tooltip: {
                    trigger: 'axis',
                },
                xAxis: {
                    data: xdata
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    name: '待匹配波形',
                    type: 'line',
                    data: this.trackdd1
                }, {
                    name: '基准波形',
                    type: 'line',
                    data: this.trackdd2
                }]
            })
        },
        async handleSearch2() {
            // 第二行的搜索按钮 historyWave base数据
            let myChart = echarts.init(document.getElementById('myChart'))
            // showloading
            myChart.showLoading();
            const form = {
                tablename: this.tablename2,
                sensorname: this.sensorname,
                km: this.km,
                meters: this.meters,
            }
            const res = await this.$http.post('/getTrackDataLineFExcel?od=2', form);
            this.trackdd2 = res.data.data;
            const len = this.trackdd2.length;
            var xdata = new Array(len)
            for (var i = 0; i < len; i++) {
                xdata[i] = i + 1;
            }
            // loading
            myChart.hideLoading();

            myChart.setOption({
                title: {
                    text: '轨检数据波形展示',
                    subtext: '数据来自北京交大515实验室',
                    left: 'center'
                },
                legend: {
                    data: ['待匹配波形', '基准波形'],
                    left: 'right',
                    orient: 'vertical'
                },
                toolbox: {
                    left: 'left',
                    feature: {
                        saveAsImage: {}
                    }
                },
                tooltip: {
                    trigger: 'axis',
                },
                xAxis: {
                    data: xdata
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    name: '待匹配波形',
                    type: 'line',
                    data: this.trackdd1
                }, {
                    name: '基准波形',
                    type: 'line',
                    data: this.trackdd2
                }]
            })
        },
        drawLine() {
            let myChart = echarts.init(document.getElementById('myChart'))
            // 空图
            myChart.setOption({
                title: {
                    text: '轨检数据波形展示',
                    subtext: '数据来自北京交大515实验室',
                    left: 'center'
                },
                legend: {
                    data: [],
                    left: 'right',
                    orient: 'vertical'
                },
                toolbox: {
                    left: 'left',
                    feature: {
                        saveAsImage: {}
                    }
                },
                tooltip: {
                    trigger: 'axis',
                },
                xAxis: {
                    data: []
                },
                yAxis: {
                    type: 'value'
                },
                series: []
            })
        },
        async getTables() {
            const res = await this.$http.post('getTables')
            const {
                data,
                code,
                msg
            } = res.data
            let op = []
            for (var i = 0; i < data.length; i++) {
                op[i] = {
                    value: data[i],
                    label: data[i]
                }
            }
            this.tablesList1 = op
            this.tablesList2 = op
        },
        async getSensors() {
            const res = await this.$http.post('getSensorList')
            const {
                data,
                code,
                msg
            } = res.data
            let tmp = []
            for (var i = 0; i < data.length; i++) {
                tmp[i] = {
                    value: data[i].sensor_name,
                    label: data[i].sensor_name
                }
            }
            this.sensorList = tmp
            //this.sensorList2 = tmp
        }
    }
}
</script>

<style>
.secondRow {
    margin-top: 20px;
}

.tableSelect {
    width: 300px;
}

.thirdRow {
    margin-top: 20px;
}

.col-1 {
    text-align: center;
    margin-top: 8px;
    font-weight: bold;
}

.kmsp {
    font-weight: bold;
}

.wmBTN {
    margin-top: 20px;
}

#myChart {
    margin-top: 20px;
}
</style>
